<template>
	<view class="page">
		<topVue title="我的用户"></topVue>
		
		<!-- banner部分 -->
		<view class="bannerVue margin0 padding30">
			<view class="li">
				<view class="label">总累计业绩</view>
				<view class="value">￥{{info.totalResults/100}}</view>
			</view>
			<view class="li margin30">
				<view class="label">今日业绩</view>
				<view class="value">￥{{info.todaySResults/100}}</view>
			</view>
			<view class="processVue margin30 padding30">
				<view class="flex-between align-center">
					<view class="label" style="font-size: 28rpx;">服务商等级进度</view>
					<view class="value" style="font-size: 28rpx; padding-top: 0;">{{info.totalResults/100}}/{{parent/100}}</view>
				</view>
				<u-gap height="20"></u-gap> 
				<u-line-progress active-color="#fff" inactive-color="rgba(255,255,255,0.2)" :striped="true" :striped-active="true" :show-percent="false" :percent="percent"></u-line-progress>
				<u-gap height="20"></u-gap> 
				<view class="label" style="font-size: 28rpx;">升级{{nextLevel}}</view>
			</view>
		</view>
	
		<!-- data部分 -->
		<view class="dataVue margin30 flex-wrap">
			<view class="data">
				<view class="value">￥{{info.accumulationSubsidies/100}}</view>
				<view class="label">补贴总计</view>
			</view>
			<view class="data">
				<view class="value">￥{{info.toBeIssued/100}}</view>
				<view class="label">已发放补贴</view>
			</view>
			<!-- <view class="data">
				<view class="value">￥{{info.issued}}</view>
				<view class="label">待发放补贴</view>
			</view>
			<view class="data">
				<view class="value">￥{{info.todayBeIssued}}</view>
				<view class="label">今日待发放</view>
			</view> -->
		</view>
	
		<view class="listVue">
			<view class="flex-between">
				<view class="label">直接分享用户（{{total}}）</view>
				<text>注册总人数：{{info.numberOfPeopleInTheGroup}}</text>
			</view>
			
			<u-empty text="列表为空" v-if="total===0" margin-top="100"></u-empty>
			<view class="item margin20 flex align-center" v-for="(item, index) in list" :key="index">
				<u-avatar :src="item.avatar" size="88"></u-avatar>
				<view class="flex-1 flex-between flex-column" style="padding-left: 20rpx; height: 78rpx;">
					<view class="flex-between align-center">
						<view class="user">{{item.name}}:{{item.userId}}({{item.grade}})</view>
						<view class="value">￥{{item.teamPerformance/100}}</view>
					</view> 
					<view class="flex-between align-center">
						<view class="time">{{item.phone | conceal()}}</view>
						<view class="time">{{item.invitationTime | formatTime("YMDHMS")}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <u-action-sheet :list="actions" v-model="showAction" @click="createFun"></u-action-sheet> -->
		
		<posterVue :show='isPoster' @cancel="isPoster=false" ref="poster"></posterVue>
		
		<u-popup v-model="isPoster" mode="center" border-radius="10">
			<view class="popVue">
				<view class="canvas" @longpress="saveImageToPhotosAlbum()">
					<canvas :style="{ width: cansWidth + 'px', height: cansHeight + 'px' }" 
					canvas-id="canvasId"></canvas>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import QR from "@/common/qrcode/qrcode.js";
	import { mapState } from "vuex"
	export default {
		data(){ 
			return {
				showAction: false,
				// actions: [{text: "生成邀请链接"}, {text: "生成邀请海报"}],
				isPoster: false,
				cansWidth: 280, //海报宽度
				cansHeight: 606,
				poster:'../../static/poster.jpg',
				info: {
					totalResults: 0,
					todaySResults: 0,
					grade: null,
					accumulationSubsidies: 200,
					issued: 100,
					toBeIssued: 100,
					todayBeIssued: 100
				},
				list: [],
				pageNum: 1,
				pageSize: 10,
				pages: 0,
				total: 0,
				parent: 0,
				percent: 0,
				nextLevel: ""
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
				balanceInfo: state => state.balanceInfo
			})
		},
		
		async mounted() {
			await this.getInfo()
			await this.getList()
		},
		
		async onReachBottom() {
			if(this.pageNum===this.pages) return
			this.pageNum++
			await this.getList()
		},
		
		methods: {
			handle(){
				this.showAction = true
			},
			
			async getInfo(){
				const result = await this.$request("/app-api/pay/wallet-transaction/statisticalOutreach", "GET", {
					userId: this.user.id,
				})
				if(result.code===0) {
					this.info = result.data
					console.log("kkkkk", this.info)
					// 普通会员  初级合伙人 中级合伙人 高级合伙人 资深合伙人
					switch(this.info.grade){
						case "普通会员":
							this.nextLevel = "同城服务商"
							this.parent = 3000000
							this.percent = this.info.totalResults/3000000*100
						break;
						case "同城服务商":
							this.nextLevel = "区县服务商"
							this.parent = 30000000
							this.percent = this.info.totalResults/30000000*100
						break;
						case "区县服务商":
							this.nextLevel = "市级服务商"
							this.parent = 300000000
							this.percent = this.info.totalResults/300000000*100
						break;
						case "市级服务商":
							this.nextLevel = "省级服务商"
							this.parent = 1500000000
							this.percent = this.info.totalResults/1500000000*100
						break;
					}
				}
			},
			
			async getList(){
				const result = await this.$request("/app-api/pay/wallet-transaction/acquireUsersAndPromoteUsers", "GET", {
					userId: this.user.id,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				},"application/x-www-form-urlencoded")
				console.log(result)
				if(result.code===0) {
					this.list = this.list.concat(result.data.list ? result.data.list : [])
					this.total = result.data.total || 0
					this.pages = Math.ceil(result.data.total/this.pageSize)
					console.log("直推列表", this.list)
					console.log("总页数", this.pages)
				}
			},
			
			createFun(e){
				console.log(e)
				if(e===0) this.$tools.copy(`https://flsnfuylofsy.sealosbja.site?inviteCode=${this.user.id}`)
				if(e===1) {
					this.isPoster = true
					this.initCanvas()
				}
			},
		
			initCanvas() { //绘制海报
				const shareUrl = `https://flsnfuylofsy.sealosbja.site?inviteCode=${this.user.id}`;
				const QRCODE = QR.createQrCodeImg(shareUrl, {
					size: parseInt(100) //二维码大小
				})
				let that = this;
				uni.showLoading()
				const context = uni.createCanvasContext('canvasId')
				setTimeout(function() { //定时器，海报方法不能立即执行，等页面渲染完成
					context.drawImage(that.poster, 0, 0, 280, 606) //个人信息背景	
					context.drawImage(QRCODE, 84, 463.5, 114, 114) //二维码图片
					// context.setFillStyle('#f1f1f1')
					// context.setFontSize(14)
					// context.fillText('打折买币就产币', 160, 335)
					// context.fill()
					context.save()
					context.beginPath()
					context.arc(44, 350, 25, 0, 2 * Math.PI)
					context.clip()
					context.restore()
					context.draw(false, ()=>{
						console.log("完毕")
						uni.hideLoading()
						that.$u.toast("长按海报保存至相册")
					})
				}, 200);
			},
			
			//保存海报
			saveImageToPhotosAlbum(e) { 
				let that = this;
				uni.showLoading();
				let tempRatio = 1.5;
				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: that.cansWidth * tempRatio,
					height: that.cansHeight * tempRatio,
					destWidth: that.cansWidth * tempRatio * 2,
					destHeight: that.cansHeight * tempRatio * 2,
					canvasId: 'canvasId',
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: '保存相册成功',
									icon: "none"
								})
								this.showPoster = false
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {
													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
		}
	}
</script>

<style lang="less" scoped>
	.popVue {
		width: 280px;
		height: 606px;
	}
	.bannerVue {
		width: 690rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 18rpx;
		.label {
			color: rgba(255, 255, 255, 0.6);
			font-size: 24rpx;
			line-height: 1;
		}
		.value {
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			padding-top: 10rpx;
			line-height: 1;
		}
		.processVue {
			width: 100%;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 18rpx;
		}
	}

	.dataVue {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx 30rpx 0;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.data {
			width: 50%;
			margin-bottom: 30rpx;
			.value {
				color: #1CC289;
				font-weight: 600;
				font-size: 32rpx;
				line-height: 1;
			}
			.label {
				color: #666;
				font-size: 26rpx;
				line-height: 1;
				padding-top: 15rpx;
			}
		}
	}
	
	.listVue {
		width: 100%;
		padding: 30rpx 30rpx 0;
		.label { 
			color: #000;
			font-size: 30rpx;
			font-weight: 600;
		}
		.item {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 20rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			.user {
				color: #333;
				font-weight: 600;
				line-height: 1;
			}
			.time {
				color: #6B7280;
				// padding-top: 20rpx;
				line-height: 1;
			}
			.value {
				color: #1CC289;
				font-weight: 600;
				font-size: 30rpx;
				line-height: 1;
			}
		}
	}
	
	.botVue {
		width: 100%;
		height: 280rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		z-index: 999;
		padding: 0 30rpx;
		.btn {
			width: 690rpx;
			height: 100rpx;
			background: #1CC289;
			border-radius: 15rpx;
			text {
				color: #fff;
				font-size: 30rpx;
				padding-left: 10rpx;
			}
		}
		.btn1 {
			width: 690rpx;
			height: 100rpx;
			border: #1CC289 1rpx solid;
			border-radius: 15rpx;
			text {
				color: #1CC289;
				font-size: 30rpx;
				padding-left: 10rpx;
			}
		}
	} 
</style>